<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>物料组成设计</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css">
    <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
    <link rel="stylesheet" href="../../../lib/bootstarp/css/bootstrap.css">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
    <script src="../../../lib/layui-v2.5.5/layui.all.js"></script>
    <script src="../../../lib/layui-v2.5.5/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
    <script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../../../lib/common/jquery.cookie.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.3/qs.js"></script>
    <script src="../../../lib/bootstarp/js/bootstrap.js"></script>
    <script src="config/common.js"></script>
    <style>
        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div id="app">
            <div>
                <fieldset class="layui-elem-field">

                    <div class="layui-field-box" style="margin-left: 290px ">
                        <label for="">名称：</label>
                        <el-input v-model="record.productName" style="display: inline-block;width: 190px"
                                  placeholder="产品档案名称"></el-input>
                        <label for="">日期： </label>
                        <el-date-picker
                                v-model="record.registerTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择建档日期">
                        </el-date-picker>
                        <el-button type="primary" @click="findPage()" icon="el-icon-search">搜索</el-button>
                    </div>
                </fieldset>
            </div>
            <div>
                <el-table
                        :data="recordList"
                        ref="multipleTable"
                        v-loading="loading"
                        border
                        @selection-change="handleSelectionChange"
                        style="width: 100%;margin: 0 auto">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column type="expand" label="详细" width="50">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="产品ID">
                                    <span>{{ props.row.productId }}</span>
                                </el-form-item>
                                <el-form-item label="产品名称">
                                    <span>{{ props.row.productName }}</span>
                                </el-form-item>
                                <el-form-item label="厂商">
                                    <span>{{ props.row.factoryName }}</span>
                                </el-form-item>
                                <el-form-item label="配置">
                                    <span>{{ props.row.productClass }}</span>
                                </el-form-item>
                                <el-form-item label="保修期">
                                    <span>{{ props.row.warranty }}</span>
                                </el-form-item>
                                <el-form-item label="市场单价">
                                    <span>{{ props.row.listPrice }}</span>
                                </el-form-item>
                                <el-form-item label="成本单价">
                                    <span>{{ props.row.realCostPrice }}</span>
                                </el-form-item>
                                <el-form-item label="单位">
                                    <span>{{ props.row.amountUnit }}</span>
                                </el-form-item>
                                <el-form-item label="产品经理">
                                    <span>{{ props.row.responsiblePerson  }}</span>
                                </el-form-item>
                                <el-form-item label="登记人">
                                    <span>{{ props.row.register  }}</span>
                                </el-form-item>
                                <el-form-item label="产品描述">
                                    <span>{{ props.row. productDescribe }}</span>
                                </el-form-item>
                                <el-form-item label="建档时间">
                                    <span>{{ props.row.registerTime }}</span>
                                </el-form-item>
                                <el-form-item label="物料设计ID" style="display: none">
                                    <span>{{ props.row.materielArchivesId }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="ID"
                            prop="id">
                    </el-table-column>
                    <el-table-column
                            label="商品名称"
                            prop="productName">
                    </el-table-column>
                    <el-table-column
                            label="描述"
                            prop="productDescribe">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="80">
                        <template slot-scope="scope">
                            <el-button-group>
                                <el-tooltip class="item" effect="dark" content="物料设计" placement="top-start">
                                    <el-button type="primary"
                                               @click="recordmessage(scope.row),selectByproId(scope.row.productId)"
                                               data-toggle="modal"
                                               data-target="#myModal"
                                               size="small" icon="el-icon-plus"></el-button>
                                </el-tooltip>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page"
                        :page-sizes="[10, 20, 30, 40,50,60]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>

            <!--添加物料的模态框-->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">物料组成</h4>
                        </div>
                        <div class="modal-body">
                            <blockquote class="layui-elem-quote layui-quote-nm">
                                产品编号：<span id="productids">{{recordmessageList.productId}}</span>
                                产品名称：{{recordmessageList.productName}}
                            </blockquote>

                            <div>
                                <button type="button" class="layui-btn" @click="addrow()">添加物料选项</button>
                            </div>
                            <div>
                                <table class="layui-table">
                                    <colgroup>
                                        <col width="150">
                                        <col width="200">
                                        <col>
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>物料名称</th>
                                        <th>所需数量</th>
                                        <th>单位</th>
                                        <th>描述</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in addconstituteList.archives">
                                        <td>
                                            <el-select v-model="item.materialid"
                                                       @change="selectByproId(item.materialid)" placeholder="请选择">
                                                <el-option
                                                        v-for="items in options"
                                                        :key="items.productId"
                                                        :label="items.productName"
                                                        :value="items.productId">
                                                </el-option>
                                            </el-select>
                                        </td>
                                        <td>
                                            <el-input v-model="item.materialnum" placeholder="请输入数量"></el-input>
                                        </td>
                                        <td>
                                            <el-input v-model="item.materialunit" placeholder="请输入单位"></el-input>
                                        </td>
                                        <td>
                                            <el-input v-model="item.materialremark" placeholder="请输入描述信息"></el-input>
                                        </td>
                                        <td>
                                            <el-button type="danger" icon="el-icon-delete" circle
                                                       @click="deleteRow(index)"></el-button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" @click="addarchives()">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    layui.use(['layer', 'form'], function () {
        var layer = layui.layer
            , form = layui.form;
        var vm = new Vue({
            el: '#app',
            data: {
                /*加载动画*/
                loading: true,
                page: 1,//页码
                pageSize: 10,//行数
                total: 0,//总记录数
                recordList: [],//展示的数据
                record: {//查询的条件
                    productName: "",//产品名称
                    registerTime: ""//建档时间
                },
                recordmessageList: {//点击的产品数据
                },

                addconstituteList: {
                    record: {},
                    archives: []

                },
                options: [],//物料下拉框数据
            },
            methods: {
                /*添加选项*/
                addrow() {
                    this.addconstituteList.archives.push({});
                },
                /*删除选项*/
                deleteRow(index) {
                    this.addconstituteList.archives.splice(index, 1);
                },
                /*查询物料名称*/
                selectByproId(proid) {
                    /* axios.get(api1+"design_material/selectById?ID="+proid).then(res=>{
                     })*/
                    this.addconstituteList.record.productId = this.recordmessageList.productId
                },
                /*添加组成*/
                addarchives() {
                    if (this.addconstituteList == null) {
                        vm.$message({//添加失败
                            showClose: true,
                            message: "请添加物料在提交",
                            type: 'error'
                        });
                        return;
                    }
                    $.ajax({
                        url: api1 + "material_archives/addarchives",
                        method: "post",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(this.addconstituteList),
                        success: function (data) {
                            if (data.success) {
                                vm.$message({//添加成功
                                    showClose: true,
                                    message: data.message,
                                    type: 'success'
                                });
                            } else {
                                vm.$message({//添加失败
                                    showClose: true,
                                    message: data.message,
                                    type: 'error'
                                });
                            }
                        },
                        error: function () {
                            vm.$message({//异常
                                showClose: true,
                                message: "异常",
                                type: 'error'
                            });
                        }
                    })
                },
                /*//获取点击的行数据*/
                recordmessage(row) {
                    this.recordmessageList = row;//绑定到修改的实体
                    axios.get(api1 + "material_archives/selectByproId?productId=" + row.productId).then(res => {
                        if (res.data != null) {
                            this.addconstituteList.archives = res.data;
                        }
                    })
                },
                /*分页条件查询*/
                findPage() {
                    axios.post(api1 + "design_record/notconstitute?page=" + this.page + "&pageSize=" + this.pageSize, this.record).then(res => {
                        this.total = res.data.total;
                        this.recordList = res.data.data;
                        this.loading = false;
                    }).catch(err => {
                        vm.$message({//异常
                            showClose: true,
                            message: "获取超时，请检查网络",
                            type: 'error'
                        });
                    })
                },
                /*设置行数*/
                handleSizeChange(pageSize) {
                    this.pageSize = pageSize;
                },
                /*获取页码*/
                handleCurrentChange(page) {
                    this.page = page;
                    this.findPage();
                },
                /*全选*/
                toggleSelection(rows) {//全选选中
                    if (rows) {
                        rows.forEach(row => {
                            this.$refs.multipleTable.toggleRowSelection(row);
                        });
                    } else {
                        this.$refs.multipleTable.clearSelection();
                    }
                },
                /*获取复选框选中的值*/
                handleSelectionChange(value) {
                    this.deleterecords = value;
                },
                selectAll() {
                    axios.get(api1 + "design_material/selectAll").then(res => {
                        this.options = res.data;
                    }).catch()
                }

            },
            created() {
                /*页面加载*/
                this.findPage();
                /**/
                this.selectAll();
            }
        });
    });

</script>
</html>
